import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import { IEchartsProps } from '@/types'

const RadarCharts: React.FC<IEchartsProps> = props => {
  const echartRef = useRef(null)
  const data = {
    indicator: [
      {
        name: '服务态度',
        max: 10
      },
      {
        name: '在线时长',
        max: 600
      },
      {
        name: '接单率',
        max: 100
      },
      {
        name: '评分',
        max: 5
      },
      {
        name: '关注度',
        max: 10000
      }
    ],
    data: [
      {
        value: [8, 300, 80, 4, 9000],
        name: '司机模型诊断'
      }
    ]
  }
  useEffect(() => {
    initEcharts()
  }, [])

  const initEcharts = () => {
    const myEcharts = echarts.init(echartRef.current)
    const option = {
      legend: {
        data: ['司机模型诊断']
      },
      radar: {
        indicator: data.indicator
      },
      series: [
        {
          name: '模型诊断',
          type: 'radar',
          data: data.data
        }
      ]
    }
    myEcharts.setOption(option)
  }

  return <div ref={echartRef} style={{ width: props.width, height: props.height }}></div>
}

export default RadarCharts
